<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="d3.js"></script>
    <script>
    function draw(data) {
        "use strict";
        d3.select("body")
          .append("ul")
          .selectAll("li")
          .data(data)
          .enter()
          .append("li")
            .text(function (d) {
                return d.name + ": " + d.status;
            });
        
        d3.selectAll("li")
            .style("font-weight", function(d){
                if (d.status == "GOOD SERVICE"){
                    return "normal"
                } else {
                    return "bold"
                }
            })
        
    }
    </script>
</head>
<body>
    <script>
        d3.json('data/service_status.json', draw);
    </script>
</body>
</html>
